Dynamic Drive DHTML Scripts- Drop Down Menu Link

Dynamicdrive.com

New

Revised

Hot

FAQ

Submit

M Zone

.	Menu
	Search DD Recommend DD Help Forums New DHTML books Advertising Contact
	Featured Script Rollover buttons Turn regular form buttons into rollover menus with this script! .
	Partners
	Free JavaScripts .
	Link to DD
	Do you use scripts from Dynamic Drive? Please give something back by linking to us... .

Home Menus and navigation systems Here

Drop down menu link All

Credits: Dynamic Drive
Last updated: 98/11/08

Description: Combo link boxes are great- and outdated. With all the DHTML capabilities that comes with fourth generation browsers, isn't it time you upgraded your shabby combo box to a more stylish, versatile DHTML drop down menu? The below is a cross-browser menu script that allows you to pack into it rich HTML links. IE 4 users will experience the added effect of the menu incrementally coming into view when clicking it. As always, the script degrades well with all low-level browsers, so what are you waiting for? Give your combo boxes a total makeover today!

Demo:

Click here

Directions

Step 1: Add the following style sheet to the head section of your page:

Step 2: Insert the below code into the <body> section of your page where you wish the drop down link to appear:

<ilayer id="dropmenu01" height=35px> <layer id="dropmenu02" visibility=show> <span id="iewrap"> <span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false"> <font face="Verdana"><b><a href="alternate.htm">Click here</a></b></font> </span> </span> </layer> </ilayer> <script language="JavaScript1.2"> /* Drop down menu link (c) Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ //set below variable to false if you wish to turn off "fade-off" effect for IE 4 users var enableeffect=true //change the contents of the array to your own. You may extend this list as neccessary var selection=new Array() selection[0]='<font face="Verdana"><a href="ff">Link 1</a><br>' selection[1]='<a href="ff">Link 2</a><br>' selection[2]='<a href="ff">Link 3</a><br>' selection[3]='<a href="ff">Link 4</a><br>' selection[4]='<a href="ff">Link 5</a><br></font>' if (document.layers) document.dropmenu01.document.dropmenu02.visibility='show' function dropit2(){ if (document.all){ dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (dropmenu03.style.visibility=="hidden"){ if (enableeffect) dropmenu03.filters.revealTrans.apply() dropmenu03.style.visibility="visible" if (enableeffect) dropmenu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.dropmenu03.visibility=="hide") document.dropmenu03.visibility="show" else document.dropmenu03.visibility="hide" document.dropmenu03.left=e.pageX-e.layerX document.dropmenu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) dropmenu03.filters.revealTrans.stop() dropmenu03.style.visibility="hidden" } function hidemenu2(){ document.dropmenu03.visibility="hide" } if (document.layers){ document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK) document.dropmenu01.document.dropmenu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script>

Step 3: Add the below code inside the <body> section as well. It should always follow the above fragment, and inserted in open space (not contained inside any other tags, such as a <table>).

Configuring the drop down link: Obviously, you'll want to change the links inside the menu to your own. To do so, change the contents inside array "selection[]" of Step 2. You may also wish to change the width of the drop down menu, depending on the contents. To change it's width, go to the code in Step 3. Change the width attribute inside the <div> from 120 to another pixel value.

Notes: The nature of this script requires that the drop down menu link always be left-aligned in the document. "So what if I want the link to appear in the center of the page?", you yell. Well, you'll need to use some cheap HTML techniques. One way is to put the link (code of Step 2) inside a columned table that's centered. For example:

Sample document:
	Menu here

Another note: The default url of the drop down link is "alternate.htm", which is the url old browsers will follow (NS 3, IE 3, for example), for the sake of backwards compatibility. Make it a good one!

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6

Copyright � 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference